<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "app",
  created() {
    this.getLocation();
  },
  methods: {
    // 基于经纬度获取到具体位置信息
    getLngLatLocation() {
      const self = this;
      // 第一步：先通过ip获取经纬度
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            console.log("基于 ip 定位获取经纬度 getLngLatLocation=>", result);
            // 第二步：然后基于逆向地理编码方法获取到具体位置
            // https://lbs.amap.com/api/javascript-api/guide/services/geocoder
            AMap.plugin("AMap.Geocoder", function () {
              var geocoder = new AMap.Geocoder({
                // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                city: result.adcode,
              });

              // 解析出经纬度
              var lnglat = result.rectangle.split(";")[0].split(",");

              geocoder.getAddress(lnglat, function (status, data) {
                if (status === "complete" && data.info === "OK") {
                  // data为对应的地理位置详细信息
                  console.log("基于逆向地理编码获取到当前位置信息=>", data);
                  // 同精准定位，将定位信息存储到 store 里统一管理
                  self.$store.dispatch("setLocation", {
                    addressComponent: {
                      city: result.city,
                      province: result.province,
                    },
                    formattedAddress: data.regeocode.formattedAddress,
                  });
                  self.$store.dispatch(
                    "setAddress",
                    data.regeocode.formattedAddress
                  );
                }
              });
            });
          }
        });
      });
    },
    // 应用开始启动就主动获取当前的位置信息
    getLocation() {
      const self = this;
      // https://lbs.amap.com/api/javascript-api/guide/services/geolocation
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
        });
        geolocation.getCurrentPosition();
        // 监听：定位成功时触发
        AMap.event.addListener(geolocation, "complete", onComplete);
        // 监听：定位失败时触发
        AMap.event.addListener(geolocation, "error", onError);
        function onComplete(data) {
          // data是具体的定位信息 & 精准定位
          // 谷歌浏览器下测试，多刷新几次，有时可能会获取失败。但是我测试的时候两种情况都出现过
          console.log("onComplete", data);
          // 将位置信息存储至 store 统一管理
          self.$store.dispatch("setLocation", data);
          self.$store.dispatch("setAddress", data.formattedAddress);
        }
        function onError(data) {
          // 定位出错  & 非精准定位
          // Firefox浏览器下可以测试，多刷新几次
          console.log("onError", data);
          /*
           * tip：因为pc设备上大都缺少GPS芯片，所以在PC上的定位主要通过IP精准定位服务，该服务的失败率5%
           * 左右。
           * 解决：在这里通过 ip 定位获取地址（第一步：先通过ip获取经纬度；第二步：然后基于逆向地理编码方法获取到具体位置。）
           */
          self.getLngLatLocation();
        }
      });
    },
  },
};
</script>

<style>
#app {
  width: 100%;
  height: 100%;
  font-size: 14px;
  background: #f1f1f1;
}
</style>
